<template>
  <div class="Logistical index">
    <Head title="查看物流"/>
    <div id class="container" >
      <div class="logTop">
        <img :src="goods_info.goods_thumb">
        <div id>{{goods_info.goods_name}}</div>
      </div>

      <!--状态-->
      <div class="statuTitle">
        <div id>当前状态</div>
        <div id>
          <b id="stateName">已发货</b>
        </div>
      </div>
      <div id="logis_tit_info">
        <div class="logis_tit">{{order_express_info.express_company_name}}</div>
        <div class="logis_tit_code">运单号：{{order_express_info.express_no}}</div>
      </div>
      <!--快递信息-->
      <div class="wl">
        <!-- 边框 -->
        <div class="wl_border"></div>
        <!-- 边框 end -->
        <div class="wl_list">
          <div class="wl_list_left">
            <div class="wl_list_left_box"></div>
          </div>
          <div class="wl_list_center">
            <div class="wl_list_center_box">收</div>
          </div>
          <div class="wl_list_right">
            <span
              class="address"
            >[收货地址]{{order_address_info.province}}{{order_address_info.city}}{{order_address_info.district}}{{order_address_info.address}}</span>
          </div>
        </div>

        <div class="wl_list" v-for="(item,index) in express_info">
          <div class="wl_list_left">
            <div class="wl_list_left_box">
              {{item.ftime}}
              <!-- <div class="wl_list_left_box_top">昨天</div>
              <div class="wl_list_left_box_bot">23:14</div> -->
            </div>
          </div>
          <div class="wl_list_center">
            <div class="wl_list_center_box">发</div>
          </div>
          <div class="wl_list_right">
            <div class="address_top">已发货</div>
            <span class="address">{{item.context}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "@/components/_head";
//import Address from "@/components/london/Address";

export default {
  components: {
    Head
  },
  data() {
    return {
      order_result: {},
      order_address_info: {},
      goods_info:{},
      order_express_info:{},//物流公司信息
      express_info:[]//物流信息
    };
  },
  mounted() {
    this.get_order_info();
  },
  methods: {
    // 获取订单详情
    get_order_info() {
      this.appJS.ajax(
        "user.get_order_info",
        "post",
        {
          order_id: this.$route.query.order_id
        },
        res => {
          if (res.recode == 1) {
            this.order_result = res.data.result;
            this.goods_info = this.order_result.goods_list[0].goods_info
            this.order_address_info = this.order_result.order_address_info;
            this.order_express_info = this.order_result.order_express_info
            this.get_express_info()
          }
        }
      );
    },
    //获取物流信息
    get_express_info(){
      this.appJS.ajax(
        "user.get_express_info",
        "post",
        {
          express_com: this.order_express_info.express_com,
          express_no: this.order_express_info.express_no
        },
        res => {
          if (res.recode == 1) {
            this.express_info = res.data.result.data
          }
        }
      );
    }
  }
};
</script>

<style scoped lang='less'>
@bgC: #ff3d3c;
@pad: 0.5rem;
@defaultC: #d9d9d9;
@fontSize: 3.4vw;
.wl {
  position: relative;
  .wl_border {
    width: 3px;
    min-height: calc(15vw - 1rem);
    height: calc(100% - 1rem);
    border-left: 1px dashed #888;
    position: absolute;
    left: calc(19vw + 0.5rem);
    top: 1rem;
    z-index: 9;
  }
}
.wl_list {
  min-height: 15vw;
  width: 100%;
  padding: 0 0.5rem;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 1rem;
  margin-bottom: 0.5rem;
  &:last-child{
    margin: 0;
    position: relative;
    z-index: 99;
    background: #fff
  }
  .wl_list_left {
    width: 15vw;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .5rem;
    text-align: center;
    .wl_list_left_box_top {
      font-size: 0.9rem;
      text-align: center;
    }
    .wl_list_left_box_bot {
      text-align: center;
    }
  }
  .wl_list_center {
    height: 100%;
    width: 10vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 10vw;
    position: relative;
    z-index: 10;
    background: #fff;
    .wl_list_center_box {
      height: 8vw;
      width: 8vw;
      background: @bgC;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      border-radius: 100%;
    }
  }
  .wl_list_right {
    width: calc(100% - 25vw);
    height: 100%;
    display: flex;
    min-height: 8vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.9rem;
    .address {
      color: #888;
      font-size: 0.6rem;
    }
  }
}
.Logistical {
  min-height: 100vh;
  background: #ffffff !important;
}
.index {
  font-size: @fontSize;
  .logTop {
    .flex-box(center, center, 5vh 0 2vh 0);
    flex-direction: column;
    img {
      height: 20vw;
      width: 20vw;
      border-radius: 5px;
    }
    div {
      color: #333;
      font-size: 0.8rem;
      margin-top: 2.3vw;
    }
  }
  .statuTitle {
    .flex-box(center, center, 0.5rem);
    flex-direction: column;
    background: @bgC;
    color: #fff;
    b {
      font-weight: blod;
      font-size: 1rem;
    }
  }
  #logis_tit_info {
    border-bottom: 1px solid #d9d9d9;
    padding: 0.5rem 1rem;
    .logis_tit {
      color: #ff3d3c;
      font-size: 1.1rem;
      padding-bottom: 0.2rem;
      font-weight: bold;
    }
    .logis_tit_ftTxt {
      font-weight: bold;
    }
  }
}
</style>